import 'package:flutter/material.dart';
import 'package:flutter_layout/main/base_stateful_widget.dart';
import 'package:styled_widget/styled_widget.dart';

class ViewPage extends BaseStatefulWidget {
  const ViewPage({Key? key}) : super(key: key);

  @override
  _ViewPageState createState() => _ViewPageState();
}

class _ViewPageState extends State<ViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.runtimeType.toString()),
      ),
      body: Column(
        children: [
          Row(
            children: [
              Align(
                alignment: Alignment.centerLeft,
                // child: Container(
                // color: Colors.amber,
                child: Listener(
                  child: const Icon(Icons.mic, color: Colors.white)
                      .padding(all: 10)
                      .decorated(color: const Color(0xff7AC1E7), shape: BoxShape.circle)
                      .padding(all: 15)
                      .decorated(color: const Color(0xffE8F2F7), shape: BoxShape.circle)
                      .padding(all: 20)
                      .card(
                        elevation: 3,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20),
                        ),
                      )
                  // .alignment(Alignment.topLeft)
                  // .backgroundColor(Color(0xffEBECF1)
                  // )
                  ,
                  onPointerUp: (event) {
                     widget.showAppToast("我被点击了");
                  },
                ),
                // ),
              ).width((MediaQuery.of(context).size.width / 3)),
              Align(
                alignment: Alignment.center,
                child: Listener(
                  child: const Icon(Icons.mic, color: Colors.white)
                      .padding(all: 10)
                      .decorated(color: const Color(0xff7AC1E7), shape: BoxShape.circle)
                      .padding(all: 15)
                      .decorated(color: const Color(0xffE8F2F7), shape: BoxShape.circle)
                      .padding(all: 20)
                      .card(
                        elevation: 3,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20),
                        ),
                      ),
                  onPointerUp: (event) {
                     widget.showAppToast("我被点击了");
                  },
                ),
              ).width((MediaQuery.of(context).size.width / 3)),
              DecoratedBox(
                decoration: const BoxDecoration(
                    // color: Color(0xffEBECF1),
                    ),
                child: Align(
                  alignment: Alignment.center,
                  child: Card(
                    elevation: 3,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: const Padding(
                      padding: EdgeInsets.all(20),
                      child: DecoratedBox(
                        decoration: BoxDecoration(
                          color: Color(0xffE8F2F7),
                          shape: BoxShape.circle,
                        ),
                        child: Padding(
                          padding: EdgeInsets.all(15),
                          child: DecoratedBox(
                            decoration: BoxDecoration(
                              color: Color(0xff7AC1E7),
                              shape: BoxShape.circle,
                            ),
                            child: Padding(
                              padding: EdgeInsets.all(10),
                              child: Icon(
                                Icons.home,
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ).width((MediaQuery.of(context).size.width / 3))
            ],
          ),
          Row(
            children: [
              Listener(
                child: const Icon(Icons.mic, color: Colors.white)
                    .padding(all: 10)
                    .decorated(color: const Color(0xff7AC1E7), shape: BoxShape.circle)
                    .padding(all: 15)
                    .decorated(color: const Color(0xffE8F2F7), shape: BoxShape.circle)
                    .padding(all: 20)
                    .card(
                      elevation: 3,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20),
                      ),
                    )
                    .alignment(Alignment.center)
                // .backgroundColor(Color(0xffEBECF1))
                ,
                onPointerUp: (event) {
                   widget.showAppToast("我被点击了");
                },
              ).width((MediaQuery.of(context).size.width / 3)),
              Listener(
                child: const Icon(Icons.mic, color: Colors.white)
                    .padding(all: 10)
                    .decorated(color: const Color(0xff7AC1E7), shape: BoxShape.circle)
                    .padding(all: 15)
                    .decorated(color: const Color(0xffE8F2F7), shape: BoxShape.circle)
                    .padding(all: 20)
                    .card(
                      elevation: 3,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20),
                      ),
                    )
                    .alignment(Alignment.center)
                // .backgroundColor(Color(0xffEBECF1))
                ,
                onPointerUp: (event) {
                   widget.showAppToast("我被点击了");
                },
              ).width((MediaQuery.of(context).size.width / 3)),
            ],
          ),
        ],
      ),
    );
  }
}
